<template>

    <view class="overcoat">
		
		<view class="data1">
			<view class="data1-img" v-for="(item,index) in list.arr1" :key="index">
				<image :src="item" mode="" class="img"></image>
			</view>
		</view>
		
		<view class="data2">
			<view class="data2-img" v-for="(item,index) in list.arr2" :key="index">
				<image :src="item" mode=""></image>
			</view>
		</view>
		
		<view class="data3">
			<view class="zuo">
				<image :src="list.arr3.img1" mode=""></image>
			</view>
			<view class="you">
				<image :src="list.arr3.img2" mode=""></image>
				<image :src="list.arr3.img3" mode=""></image>
			</view>
		</view>
		
		<view class="data2">
			<view class="data2-img" v-for="(item,index) in list.arr4" :key="index">
				<image :src="item" mode=""></image>
			</view>
		</view>
    </view>
	<mosowe-swiper
	    :lists="data"
	    :touchable="false"
	    indicator="dots"
	    imageKey="image"
	    previewImage
	    pyramid
	    pyramidMargin="120rpx"
	    @change="bannerChange"
		:height="600"
	    />
	
</template>

<script>
import { defineComponent } from "vue";
import {datalist} from "@/untils/datatwo.js";
import {ref,toRefs} from "vue";
import mosoweSwiper from"../mosowe-swiper/mosowe-swiper.vue"
export default defineComponent({
  setup() {
	let list=ref([]);
	let data=ref([]);
	data.value=datalist.arr5;
	
	list.value=datalist;
	console.log("data的值",data.value);

    return {
		list,
		data,
	};
  }
});
</script>

<style lang="scss" scoped>
.overcoat{
	width: 100%;
	padding: 0 20rpx;
	box-sizing: border-box;
	margin:0 auto;
	.data1{
		width: 100%;
		display: flex;
		justify-content: space-between;
		
		.data1-img{
			width: 350rpx;
			height:300rpx;
			.img{
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}
		}
	}
	.data2{
		width: 100%;
		display: flex;
		flex-direction: column;
		.data2-img{
			width: 100%;
			height: 400rpx;
			margin: 20rpx 0;
			image{
				width: 100%;
				height:100%;
				border-radius: 20rpx;
			}
		}
	}
	.data3{
		width: 100%;
		display: flex;
		justify-content: space-between;
		.zuo{
			width: 350rpx;
			height:300rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.you{
			width: 350rpx;
			height:300rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			image{
				width: 100%;
				height: 47%;
			}
		}
	}

}

</style>